<template>
  <div class='container'>
    <!-- 预览文章对话框 -->
      <el-dialog title="题目预览" :visible="articleDialog" @close="hClose">
        <!--  -->
            <el-row>
              <el-col :span="6">【题型】：{{questionType[titlePreview && titlePreview.questionType-1]?.label + '题' }}</el-col>
              <el-col :span="6">【编号】：{{titlePreview.id }}</el-col>
              <el-col :span="6">【难度】：{{difficulty[titlePreview && titlePreview.difficulty-1]?.label}} </el-col>
              <el-col :span="6">【标签】：{{titlePreview.tags  }}</el-col>
              <el-col :span="6">【学科】：{{titlePreview.subjectName  }}</el-col>
              <el-col :span="6">【目录】：{{titlePreview.directoryName  }}</el-col>
              <el-col :span="6">【方向】：{{titlePreview.direction  }}</el-col>
            </el-row>
            <hr>
            <div>  【题干】：</div>
            <div style="color:blue"><p v-html="titlePreview.question"></p></div>
            <div v-if="titlePreview.questionType !== '3'">
              <div class="radio-title">{{questionType[titlePreview && titlePreview.questionType-1]?.label + '题' }} 选项：（以下选中的选项为正确答案）</div>
              <div class="radio-dialog">
                <el-radio-group v-if="titlePreview.questionType === '1'" v-model="radio">
                  <el-radio class="multipleChoice"  v-for="item in titlePreview.options" :label="item.id" :key="item.id" @click.native.prevent>{{`${item.code}:` + item.title}}</el-radio>
                </el-radio-group>
                <el-checkbox-group v-model="checkList" v-else-if="titlePreview.questionType === '2'">
                  <el-checkbox class="multipleChoice"  :label="item.id"  v-for="item in titlePreview.options"  :key="item.id" @click.native.prevent>{{`${item.code}:` + item.title}}</el-checkbox>
                </el-checkbox-group>
          </div>
            </div>
            <hr>
            <div>  【题干】：<el-button type="danger" @click="flag=true">视频答案预览</el-button></div>
            <div v-if="flag">
              <video :src="detailList.videoURL" controls></video>
            </div>
            <hr>
            <div>  【答案解析】：<div style="display: inline-block;"><p v-html="titlePreview.answer"></p></div></div>
            <hr>
            <div>  【题目备注】：<div style="display: inline-block;"><p>{{titlePreview.remarks}}</p></div></div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="hClose">取 消</el-button>

        </div>
      </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  props: {
    articleDialog: {
      type: Boolean,
      required: true
    },
    titlePreview: {
      type: Object,
      required: true
    }

  },
  data () {
    return {
      radio: '1',
      checkList: [],
      questionType,
      difficulty,
      flag: false
    }
  },
  methods: {
    hClose () {
      this.flag = false
      this.$emit('update:articleDialog', false)
    }
  }
}
</script>

<style scoped lang='scss'>
.el-col {
    padding: 10px 0;
}
.radio-title{
      padding-bottom: 5px;
}
.radio-dialog{
      padding: 8px 0px
}
.dialog-footer{
  text-align: right;
}
</style>
